<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">心肺耐力</block>
    </cu-custom>
    <view class="contents u-f-ajc u-f-column">
      <view>3分钟台阶测试</view>
      <view style="font-size: 90rpx;margin: 100rpx 0;">{{minute}}:{{second}}</view>
      <view class="u-f-ac u-f-jsa" style="padding: 20rpx 0;width: 100%;">
        <view class="items u-f-ajc u-f-column" v-for="(item, index) in list" :key="index" :class="item.isActive ? 'actives' : ''"
          :style="{'backgroundColor': item.color}">
          {{item.title}}
        </view>
      </view>

      <view class="start u-f-ajc">
        <view class="u-f-ajc" @click="start">{{isStart ? '完成' : '启动'}}</view>
      </view>
      
      <view class="tiaoguo" @click="goPage">跳过</view>
    </view>
    
  </view>
</template>

<script>
  let timer;
  let colorTimer;

  export default {
    data() {
      return {
        currentIndex: 0,
        list: [{
            title: '1',
            color: '#E55044',
            isActive: true,
          },
          {
            title: '2',
            color: '#F5A604',
            isActive: false,
          },
          {
            title: '3',
            color: '#786FFE',
            isActive: false,
          },
          {
            title: '4',
            color: '#28B7A0',
            isActive: false,
          },

        ],
        second: '00',
        minute: '03',
        isStart: false,
      }
    },
    methods: {
      start() {
        this.isStart = !this.isStart
        if (this.isStart) {
          colorTimer = setInterval(() => {
            this.currentIndex += 1
            if (this.currentIndex > 3) this.currentIndex = 0
            this.list.forEach(item => item.isActive = false)
            this.list[this.currentIndex].isActive = true
          }, 600)

          timer = setInterval(() => {
            if (parseInt(this.minute) > 0 && parseInt(this.second) == 0) {
              this.minute = '0' + (parseInt(this.minute) - 1)
              this.second = 60
            }
            if (parseInt(this.minute) == 0 && parseInt(this.second) == 0) {
              console.log('执行完毕')
              clearInterval(colorTimer)
              clearInterval(timer)
              this.isStart = false
              this.goPage()
            }
            this.second = '' + (parseInt(this.second) - 1)
            if (this.second.length == 1) { // 个位数的时候 给它前面加个零
              this.second = '0' + parseInt(this.second)
            }
          }, 1000)
        } else {
          uni.showModal({
            title: '心肺耐力测试',
            content: '您正在进行心肺耐力测试，确认结束测试？',
            showCancel: true,
            cancelText: '取消',
            confirmText: '确认',
            success: res => {
              if (res.confirm) {
                console.log('用户点击确定');
                clearInterval(colorTimer)
                clearInterval(timer)
                this.isStart = false
              } else if (res.cancel) {
                console.log('用户点击取消');
              }
            },
            fail: () => {},
            complete: () => {}
          });
        }

      },
      goPage() {
        let url = `./Cardiopulmonary_endurance2`;
        uni.redirectTo({
          url
        })
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #4B505F !important;
  }

  .contents {
    padding: 30rpx;
    color: #FFFFFF;
  }

  .items {
    width: 100rpx;
    height: 100rpx;
    border-radius: 100%;
    font-size: 60rpx;
  }

  .actives {
    // width: 160rpx;
    // height: 160rpx;
    transform: scale(1.6, 1.6);
    transition: all 600ms linear 0s;
  }

  .start {
    width: 130rpx;
    height: 130rpx;
    margin-top: 150rpx;
    border-radius: 100%;
    border: 2px solid $uni-color-zhuti;
    padding: 6rpx;

    view {
      background-color: $uni-color-zhuti;
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }
  .tiaoguo {
    position: fixed;
    bottom: 20rpx;
    width: 100%;
    text-align: center;
  }
</style>
